<template>
	<view class="web_bg">
		<cu-custom bgColor="bg-gradual-green">
			<template #content>
				<text>首页</text>
			</template>
		</cu-custom>
		<view class="">
			<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true"
				:circular="true" :autoplay="true" interval="5000" duration="500" @change="cardSwiper"
				indicator-color="#8799a3" indicator-active-color="#0081ff">
				<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
					<view class="swiper-item">
						<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
						<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false"
							objectFit="cover" v-if="item.type=='video'"></video>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="cu-fun">
			<view class="cu-list grid col-3 no-border">
				<view class="cu-item" v-for="(item,index) in functionList" :key="index" @click="goFun(index)">
					<view :class="item.cuIcon" class="text-grey" :style="'color:'+item.color">
						<view class="cu-tag badge" v-if="item.badge!=0">
							{{item.badge}}
						</view>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	let swiperList = ref([{
		id: 0,
		type: 'image',
		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
	}, {
		id: 1,
		type: 'image',
		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
	}, {
		id: 2,
		type: 'image',
		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
	}, {
		id: 3,
		type: 'image',
		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
	}])
	let dotStyle = ref(true)
	let cardCur = ref(0)
	let functionList = ref([{
			cuIcon: 'cuIcon-favor',
			color: 'red',
			badge: 0,
			name: '每日星座',
		},
		{
			cuIcon: 'cuIcon-markfill',
			color: '#27ae60',
			badge: 0,
			name: '每日情话'
		},
		{
			cuIcon: 'cuIcon-service',
			color: '#f39c12',
			badge: 0,
			name: '生辰八字'
		},
		{
			cuIcon: 'cuIcon-lightfill',
			color: '#747d8c',
			badge: 0,
			name: '每日天气'
		},
		{
			cuIcon: 'cuIcon-picfill',
			color: '#f368e0',
			badge: 0,
			name: '动漫美图'
		},
		{
			cuIcon: 'cuIcon-musicfill',
			color: '#079992',
			badge: 0,
			name: '每日情歌'
		}
	])
	let cardSwiper = (e) => {
		cardCur.value = e.detail.current
	}

	//功能跳转
	let goFun = (index) => {
		let url = ''
		switch (index) {
			case 0:
				url = "/pages/constellation/index"
				break
			case 1:
				break
			case 2:
				break
			case 3:
				url = "/pages/weather/index"
				break
			case 4:
				break
			case 5:
				break
		}
		if (url) {
			console.log(url)
			uni.navigateTo({
				url
			})
		}
	}
</script>

<style scoped>
	.web_bg {
		height: 100%;
		background: #ecf0f1;
	}

	.cu-fun {
		margin: 20upx 0;
		padding: 0 20upx;
		border-radius: 10upx;
	}
</style>